<template>
  <div class="setup-attrs">
    <AiForm
      v-if="attrs.length > 0"
      :data="attrs"
      @change="change"
      ref="formRef"
    />
  </div>
</template>
<script setup>
import { Upload } from "ant-design-vue";
defineProps({
  attrs: {
    type: Array,
    default: () => {
      return [];
    },
  },
});

const emit = defineEmits();
const formRef = ref(null);

const validate = () => {
  return formRef.value.validate();
};

const resetForm = () => {
  return formRef.value.resetForm();
};

const setForm = (val) => {
  return formRef.value.setForm(val);
};

const addForm = (val, gx) => {
  return formRef.value?.addForm(val, gx);
};

const getForm = () => {
  return formRef.value?.getForm();
};

const change = (val) => {
  if (val.target) return;
  val = { ...val };
  val.rules =
    val.required && val.required.length
      ? [
          {
            type: RuleMap["Input"],
            required: true,
            message: `${val.label}不能为空`,
            trigger: "blur",
          },
        ]
      : [];
  console.log(val, "val88888");
  delete val.required;
  emit("change", val);
};

// 把相关方法暴露给外部使用
defineExpose({
  setForm,
  addForm,
  getForm,
  validate,
  resetForm,
});
</script>
<style lang="scss" scoped>
.setup-attrs {
  padding: 20px 20px 0;
}
</style>
